<template>
    <div class="count-movie">
        <div id='showorders' style='width:100%; min-height:580px'></div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, defineEmits, defineProps, watch, onMounted } from 'vue'
import { getMovieChart } from '../../../../../api/movie'
import * as echarts from 'echarts'
import dayjs from 'dayjs'

let movieChartVo: any[] = []
let movieList: any[] = []
// 日期
const dates = [
    dayjs().subtract(6, 'day').format("YYYY-MM-DD"),
    dayjs().subtract(5, 'day').format("YYYY-MM-DD"),
    dayjs().subtract(4, 'day').format("YYYY-MM-DD"),
    dayjs().subtract(3, 'day').format("YYYY-MM-DD"),
    dayjs().subtract(2, 'day').format("YYYY-MM-DD"),
    dayjs().subtract(1, 'day').format("YYYY-MM-DD"),
    dayjs().format("YYYY-MM-DD")
]
// 影院id
const cinemaId = JSON.parse(window.sessionStorage.getItem("currentUser")!).unitId


onMounted(() => {
    showorders()
})

const showorders = async () => {

    // 获取图表信息
    await getMovieChart({ dates: dates, cinemaId: cinemaId }).then((res: any) => {
        if (res.code == 200) {
            movieChartVo = res.data.map((item: any) => {
                movieList.push(item.movieName)
                return {
                    name: item.movieName,
                    type: 'line',
                    data: item.datas
                }
            })
            console.log(movieChartVo, movieList);
        }
    })

    // 基于准备好的dom，初始化echarts实例
    let chartDom = document.getElementById('showorders');
    let myChart = echarts.init(chartDom!);
    let option;

    option = {
        title: {
            text: '过去七天电影票房统计'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            // data: ['斗罗大陆', '扫毒', '绿皮书', '泰坦尼克号', '解忧杂货铺','夏洛特烦恼']
            data: movieList
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: dates
        },
        yAxis: {
            type: 'value'
        },
        series: movieChartVo
        // series: [
        //     {
        //         name: '斗罗大陆',
        //         type: 'line',
        //         data: [120, 132, 101, 134, 90, 230, 210]
        //     },
        //     {
        //         name: '扫毒',
        //         type: 'line',
        //         data: [220, 182, 191, 234, 290, 330, 310]
        //     },
        //     {
        //         name: '绿皮书',
        //         type: 'line',
        //         data: [150, 232, 201, 154, 190, 330, 410]
        //     },
        //     {
        //         name: '泰坦尼克号',
        //         type: 'line',
        //         data: [320, 332, 301, 334, 390, 330, 320]
        //     },
        //     {
        //         name: '解忧杂货铺',
        //         type: 'line',
        //         data: [820, 932, 901, 934, 1290, 1330, 1320]
        //     },
        //     {
        //         name: '夏洛特烦恼',
        //         type: 'line',
        //         data: [620, 732, 801, 934, 1090, 1030, 920]
        //     }
        // ]
    };
    
    option && myChart.setOption(option);
}


</script>
<style lang='scss' scoped>

</style>